<template>
    <div class="reportCard">
        <template v-if="cardData.dataList && cardData.dataList.length">
            <div class="cardBox">
                <div
                    class="card"
                    v-for="(item, index) in cardData.dataList"
                    :key="index"
                >
                    <div class="card-radio">
                        <div
                            class="preview"
                            v-if="
                                item.examineState == 2 &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            @click="preview(item)"
                        >
                            <i class="el-icon-view"></i
                            ><span class="pl-5">在线查看</span>
                        </div>
                        <div class="preview" @click="jumpList(item)" v-else>
                            <i class="el-icon-view"></i
                            ><span class="pl-5">{{
                                moduleType == "reportCheck" && searchFrom.user != item.examineUser ? "审核" : "查看"
                            }}</span>
                        </div>
                        <!-- <div class="upload" @click="handle(item)">
                            <i class="el-icon-star-off"></i
                            ><span class="pl-5">评价</span>
                        </div> -->
                        <div class="preview upload-2" @click="download(item)">
                            <i class="el-icon-download"></i
                            ><span class="pl-5">导出</span>
                        </div>
                    </div>
                    <div class="check-status">
                        <i
                            v-if="item.examineState == 0"
                            class="el-icon-edit push"
                        ></i>
                        <i
                            v-if="item.examineState == 1"
                            class="el-icon-remove noChecked"
                        ></i>
                        <i
                            v-if="item.examineState == 2"
                            class="el-icon-success checked"
                        ></i>
                        <i
                            v-if="item.examineState == 3"
                            class="el-icon-error error"
                        ></i>
                    </div>
                    <div class="card-item">
                        <div class="top">
                            <div class="title">{{ item.reportName }}</div>
                            <!-- <div class="subTitle">{{ item.rangeName }}</div> -->
                            <!-- <div class="year">{{item.reportYear}}学年</div> -->
                        </div>
                        <div class="bottom" style="margin-top:35px;">
                            <p>{{ item.objectName }}</p>
                            <p>
                                编制部门: {{ item.preparationDepartmentName }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                    @current-change="changePage"
                    :current-page.sync="searchFrom.pageIndex"
                    :page-size="searchFrom.pageSize"
                    layout="prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="cardData.total"
                >
                </el-pagination>
            </div>
        </template>
        <div class="emptyText" v-else>
            暂无数据
        </div>
    </div>
</template>

<script>
import { downloadReport } from '@/api/report.js';
import { getStorage } from '../../../../../dosm-front-new/src/config/utils';
var Base64 = require('js-base64').Base64;
export default {
    name: 'ReportCardS',
    props: {
        cardData: {
            type: Object
        }
    },
    data () {
        return {
            searchFrom: {
                pageIndex: 1,
                pageSize: 10,
                user: getStorage('userInfo').id
            },
            moduleType: ''
        };
    },
    mounted () {
        const str = this.$route.path.split('/');
        this.moduleType = str[2];
        // console.log(str[2], 'here');
    },
    methods: {
        // 切换页码
        changePage (val) {
            this.searchFrom.pageIndex = val;
            this.$emit('changePage', this.searchFrom);
        },
        // 跳转至详情
        jumpList (item) {
            this.$emit('jumpList', item);
        },
        // 在线查看
        preview (item) {
            console.log(item.wordUrl, 'wordUrl');
            window.open(
                `${this.productBaseUrl}8012/onlinePreview?url=` +
                    encodeURIComponent(
                        Base64.encode(
                            `${this.productBaseUrl}8081/dosm/file/${item.wordUrl}`
                        )
                    ),
                '_blank'
            );
        },
        handle (item) {
            this.$router.push({
                path: '/report/reportManage/evaluationList',
                query: {
                    id: item.id
                }
            });
        },
        download (item) {
            console.log(item, 'item==');
            const str = this.$route.path.split('/');
            downloadReport({
                id: item.id,
                wordUrl: item.wordUrl,
                reportType: str[str.length - 1]
            }).then(res => {
                console.log(res, 'rest');
                this.downloadFile(res, item);
                this.centerDialogVisible = false;
            });
        },
        // 下载文件通用方法
        downloadFile (res, item) {
            //   文件下载
            const url = window.URL.createObjectURL(new Blob([res]));
            const elementA = document.createElement('a');
            elementA.style.display = 'none';
            const fileName = item.reportName + '.docx';
            elementA.href = url;
            elementA.setAttribute('download', fileName);
            document.body.appendChild(elementA);
            elementA.click();
            document.body.removeChild(elementA);
            window.URL.revokeObjectURL(url);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/css/reprotCard.scss";

.reportCard {
    padding: 20px;
    .cardBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .card {
            .check-status {
            }
            .top {
                .title,
                .subTitle {
                }
            }

            &:hover {
                .item-mask {
                }
            }

            .item-mask {
            }
        }
    }
}
</style>
